import './index.less'
import {Row,Col,Popover,Button,Modal} from 'antd'
import {WeaTransfer, WeaLocaleProvider} from 'ecCom'

const getLabel = WeaLocaleProvider.getLabel;

class Transfer extends React.Component{
    constructor(props){
        super(props);
    }
    shouldComponentUpdate(nextProps, nextState){
        return this.props.visible !== nextProps.visible
            || this.props.options !== nextProps.options
            || this.props.selectedKeys !== nextProps.selectedKeys
            || this.props.fieldname !== nextProps.fieldname
            || this.props.description !== nextProps.description;
    }
    render(){
        const {visible,fieldname,description,options,selectedKeys} = this.props;
        return (
            <Modal wrapClassName="wf-selectitem-browser-modal" 
                style={{top: (jQuery(window).height()-337)/2}}
                visible={visible}
                maskClosable={false}
                title={this.getTopTitle()}
                onCancel={this.cancelEvent.bind(this)}
                footer= {[
                <Button type="primary" size="large" onClick={this.confirmEvent.bind(this)}>{getLabel(826, '确定')}</Button>,
                <Button type="ghost" size="large" onClick={this.cancelEvent.bind(this)}>{getLabel(309, '关闭')}</Button>
                ]} 
            >
                <div>
                    <div className="wf-selectitem-describe">
                        <Row>
                            <Col span={4}><span className="wea-item-label">{getLabel(685, '字段名称')}</span></Col>
                            <Col span={20}><span className="wea-item-content">{fieldname}</span></Col>
                        </Row>
                        <Row>
                            <Col span={4}><span className="wea-item-label">{getLabel(386089, '字段描述')}</span></Col>
                            <Col span={20}><span className="wea-item-content">{description}</span></Col>
                        </Row>
                    </div>
                    <WeaTransfer ref="transfer"
                        data={options}
                        selectedKeys={selectedKeys}
                        height={300}
                    />
                </div>
            </Modal>
        );
    }
    getTopTitle() {
        return (
            <Row>
                <Col span="8" style={{paddingLeft:20, lineHeight:"48px"}}>
                    <div className="wea-workflow-icon">
                        <i className='icon-coms-workflow' />
                    </div>
                    <span>{getLabel(18214,'请选择')}</span>
                </Col>
            </Row>
        )
    }
    confirmEvent(){
        this.props.onConfirm(this.refs.transfer.get());
    }
    cancelEvent(){
        this.props.onCancel();
    }
}

export default Transfer;